<template>
  <view class="up_head_pic_container">
    <view class="change_pic">
      <u-avatar :src="userInfo.avatar" size="110"></u-avatar>
    <view class="change_btn" @click="toUpImg">
      <uni-icons type="camera-filled" size="30" color="#fff"></uni-icons>
    </view>
    </view>
    <view class="user_info">
      <view class="info_item">
        <view>
          <text>昵称</text> <text class="right">{{ userInfo.nickName }}</text>
        </view>
        <view>
          <text>创建时间</text>
          <text class="right">{{ userInfo.createTime }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserProfile } from "@/api/system/user";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    toUpImg(){
      uni.navigateTo({ url: "/pages/mine/avatar/index" })
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: `${config.baseUrl}/common/upload`,
          filePath: url,
          name: "file",
          header: {
            Authorization: "Bearer " + getToken(),
          },
          success: (res) => {
            console.log(JSON.parse(res.data));
            setTimeout(() => {
              resolve(JSON.parse(res.data).data);
            }, 1000);
          },
        });
      });
    },

    // 获取用户信息
    getUserProfileFun() {
      getUserProfile()
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.userInfo = res.data;
            uni.setStorageSync("userInfo", JSON.stringify(res.data));
          } else {
            this.$msgError("获取失败");
            this.userInfo = {};
          }
        })
        .catch(() => {
          this.$msgError("获取失败");
          this.userInfo = {};
        });
    },
  },
  onShow() {
    this.getUserProfileFun();
  },
};
</script>

<style lang="scss" scoped>
.up_head_pic_container {
  height: 100vh;
  background-color: #fff;
  text-align: center;
  padding: 0 50rpx;

  .change_pic {
    margin: 0 auto;
    width: 240rpx;
    height: 240rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .change_btn {
      width: 80rpx;
      height: 80rpx;
      border: 2rpx #fff solid;
      border-radius: 50%;
      background: #087466;

      position: absolute;
      right: 0;
      bottom: 0;

      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .user_info {
    .info_item {
      view {
        font-size: 32rpx;
        color: #94949a;
        width: 100%;
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #c1c1c4;
        .right {
          font-family: Arial, Helvetica, sans-serif;
          font-weight: bolder;
          color: #000;
        }
      }
    }
  }
}
</style>
